<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-08 09:23:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-09 14:25:12
 * @FilePath: /hr_new_vue3/src/views/Management/Home/InternshipManagement/Summary/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 实习流程-步骤五-评价结束 -->
<template>
  <div class="step3">
    <a-form ref="formRef" :model="formData.data" auto-label-width>
      <section>
        <div class="title">
          <span>实习总结</span>
        </div>
        <div>
          <a-form-item field="scorerName" label="实习总结填写" show-colon>
            <a-textarea
              v-model="formData.data.summarize"
              :auto-size="{
                minRows: 4
              }"
              disabled
            />
          </a-form-item>
          <a-form-item field="file" label="文件附件" show-colon>
            <UploadFile
              class="file"
              ref="uploadRef"
              v-model:fileList="formData.data.files"
              :draggable="false"
              tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式"
              :fileTypeList="fileTypeList"
              :userId="userId"
              :type="2"
            />
          </a-form-item>
        </div>
      </section>
      <section>
        <div class="title">
          <span>指标评分明细</span>
        </div>
        <div>
          <a-form-item hide-label no-style>
            <a-table
              :data="formData?.data?.indexArr"
              :pagination="false"
              :bordered="{ headerCell: true }"
              :span-method="dataSpanMethod"
            >
              <template #columns>
                <a-table-column :width="80">
                  <template #title> 序号 </template>
                  <template #cell="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                </a-table-column>
                <a-table-column :width="200" data-index="name" title="指标名称">
                </a-table-column>
                <a-table-column
                  :width="200"
                  data-index="remark"
                  title="指标描述"
                >
                </a-table-column>
                <a-table-column
                  :width="200"
                  data-index=""
                  title="评分标准"
                  :headerCellStyle="{
                    height: '30px'
                  }"
                >
                  <a-table-column
                    :width="200"
                    data-index="excellent"
                    title="优秀A"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="good"
                    title="良好B"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="qualified"
                    title="合格C"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="range"
                    title="较差D"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="wrong"
                    title="差E"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                </a-table-column>
                <a-table-column
                  :width="100"
                  data-index="upperLimit"
                  title="评分上限"
                >
                  <template #cell>
                    {{
                      formData.data.upperLimitScore
                        ? formData.data.upperLimitScore
                        : '无限'
                    }}
                  </template>
                </a-table-column>
                <a-table-column
                  :width="100"
                  :headerCellStyle="{
                    height: '30px'
                  }"
                >
                  <template #title>
                    自评({{
                      `${formData.data.userName}${formData.data.selfEvaluation}%`
                    }})
                  </template>
                  <a-table-column
                    :width="100"
                    data-index="score"
                    title="评分"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                </a-table-column>
                <a-table-column
                  :width="200"
                  data-index=""
                  title="他评"
                  :headerCellStyle="{
                    height: '30px'
                  }"
                >
                  <template #title>
                    他评{{ `(${formData.data.organizationEvaluation}%)` }}
                  </template>
                  <a-table-column
                    :width="100"
                    data-index="scorerName"
                    title="评分人"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="100"
                    data-index="scorerWeight"
                    title="权重%"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="100"
                    data-index="finalScorerScore"
                    title="评分"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                </a-table-column>
                <a-table-column
                  :width="100"
                  data-index="weight"
                  title="权重(%)"
                >
                </a-table-column>
                <a-table-column
                  :width="100"
                  data-index="finialScore"
                  title="指标总分"
                  :headerCellStyle="{
                    height: '30px'
                  }"
                >
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </div>
      </section>
      <section
        class="mt-10"
        v-for="item in formData.data.customArr"
        :key="item.id"
      >
        <div>
          <div class="title">
            <span>{{ item.name }}</span>
          </div>
          <div>
            <a-form-item field="scorerName" hide-label show-colon>
              <a-textarea
                placeholder="请输入内容"
                v-model="item.text"
                :auto-size="{
                  minRows: 4
                }"
                disabled
              />
            </a-form-item>
          </div>
        </div>
      </section>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import {
  PostInternshipEvaluationHuman,
  PutInternshipEvaluationHuman,
  GetInternshipEvaluationHumanDetail,
  DelInternshipEvaluationHumanDetail,
  ChangeInternshipEvaluationHumanStatus
} from '@/apis/management/human/humanChange/internship';
import { useUserStore } from '@/store';
import { cloneDeep } from 'lodash';
import mitter from '@/utils/mitt';

const props = withDefaults(
  // 参数说明
  defineProps<{
    userId: number; // 实习人员id
    isEdit: boolean; // 是否可以编辑
  }>(),
  {
    isEdit: true
  }
);
const store = useUserStore();
const scorerName = JSON.parse(localStorage.getItem('userInfo'))?.name; // 评分人名称
const scorerId = +localStorage.getItem('userId'); // 评分人id
// const scorerId = 153; // 评分人id
let formRef = ref();
let uploadRef = ref();
const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];

const formData = reactive({
  data: {
    summarize: '', // 总结
    files: [], // 文件上传，
    indexArr: [], // 指标,
    customArr: [] // 评价内容
  }
});
let orginData; // 原始数据
let finallyScore = ref(0); //计算出来的最终总分
const getData = async () => {
  try {
    const [internshipEvaluationRes] = await Promise.all([
      GetInternshipEvaluationHumanDetail({
        id: props.userId
      })
    ]);
    formData.data = internshipEvaluationRes;
    orginData = cloneDeep(internshipEvaluationRes);

    formData.data.indexArr = handleIndexArr(cloneDeep(formData.data.indexArr));
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 处理评分指标，只显示当前评分人的
const handleIndexArr = (indexArr: []) => {
  const arr = [];
  indexArr.forEach((el: any, ind: number) => {
    let finalScorerScore = 0;
    el.scorer.forEach((el2: any) => {
      finalScorerScore += el2.score * el2.weight * 0.01;
      arr.push({
        ...el,
        subId: el2.id, //子id
        scorerScore: el2.score, // 评分人评分
        scorerWeight: el2.weight, // 评分人权重
        scorerName: el2.userName, // 评分人名称
        scorerUserId: el2.userId, // 评分人名称
        finalScorerScore: 0, // 单条多个评分人的总分（他评）
        finialScore: 0 // 单条最终指标评分（自评+他评）
      });
    });
    el.finalScorerScore = finalScorerScore;
    el.finialScore = (
      el.score * formData.data.selfEvaluation * 0.01 +
      el.finalScorerScore * formData.data.organizationEvaluation * 0.01
    ).toFixed(2);
    finallyScore.value += el.finialScore * el.weight * 0.01;
  });

  finallyScore.value = finallyScore.value.toFixed(2);

  arr.forEach((el: any) => {
    indexArr.forEach((item: any) => {
      if (item.id === el.id) {
        el.finalScorerScore = item.finalScorerScore;
        el.finialScore = item.finialScore;
      }
    });
  });
  mitter.emit('finallyScore', finallyScore.value);
  return arr;
};

const dataSpanMethod = (datas: any) => {
  const { record, rowIndex, columnIndex, column } = datas;

  let arr = formData.data.indexArr.filter((res: any) => {
    return res.id === record.id;
  });

  const enums = [
    'name',
    'remark',
    'excellent',
    'good',
    'qualified',
    'range',
    'wrong',
    'upperLimit',
    'score',
    'finalScorerScore',
    'weight',
    'finialScore'
  ];

  if (
    formData.data.indexArr[rowIndex - 1]?.id != record.id &&
    enums.includes(column.dataIndex)
  ) {
    return { rowspan: arr.length };
  }
};

defineExpose({
  finallyScore
});
</script>

<style lang="less" scoped>
.step3 {
  .title {
    min-height: 30px;
    font-weight: 600;
    font-size: 14px;
    background: #f5f7fb;
    padding: 5px 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      margin: 0 5px;
      display: inline-block;
      width: 3px;
      height: 12px;
      border-left: #409efe solid 1px;
      background: #409efe;
    }
    .title-right {
      flex: 1;
      text-align: right;
    }
  }

  .star::before {
    content: '*';
    color: red;
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
</style>
